<template>
    <h1>我是 APP 组件 --- {{ this.msg }}</h1>

    <!--
        祖孙级通信

            1. 在祖先级中通过 父传子的方式 给子组件添加一些属性或者方法
            2. 在子组件中, 如果有需要使用, 那么直接通过 props 接收使用
                * 如果不需要使用, 可以通过 给 孙子组件 添加一个 v-bind="$attrs"
                * 将我们当前子组件接收到的属性和方法, 透传给孙子组件

            注意:
                传递过去的属性, 名字不变
                传递过去的方法, 名字会变成 on + 方法名
     -->
    <child1 name="msg" :text="msg" @setMsg="setMsg" />
</template>

<script>
import child1 from "./components/child1.vue";
export default {
    data() {
        return {
            msg: "在 data 中的普通字符串",
        };
    },
    methods: {
        setMsg(newMsg) {
            this.msg2 = newMsg;
        },
    },
    components: {
        child1,
    },
};
</script>

<style></style>
